<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- 因为 AJAX 库和通用工具的生态已经相当丰富，Vue 核心代码没有重复 -->
<!-- 提供这些功能以保持精简。这也可以让你自由选择自己更熟悉的工具。 -->
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
	<style type="text/css">

	</style>
</head>
<body>
	<table>
		<th>
			<td>index</td>
			<td>nickname</td>
			<td>card_no</td>
			<td>type</td>
		</th>
		<tbody>
			<tr>
				<td>1</td>
				<td>jack</td>
				<td>189122121</td>
				<td>1</td>
			</tr>
			<tr>
				<td>2</td>
				<td>rose</td>
				<td>189190822121</td>
				<td>2</td>
			</tr>
		</tbody>
	</table>

	<div id="app">
		{{message}}
		
	</div>
	<div id="app-2">
		<span v-bind:title="message">
			mouse on a few seconds and view dynamic binding message!
		</span>
	</div>

	<div id="app-3">
		<p v-if="seen">your can see me !</p>
	</div>

	<div id="app-4">
		<ol>
			<li v-for="todo in todos">
				{{todo.text}}
			</li>
		</ol>
	</div>

	<div id="app-5">
		<p>{{message}}</p>
		<button v-on:click="reverseMessage">convert message</button>		
	</div>

	<div id="app-6">
		<p> {{message}} </p>
		<input v-model="message">
	</div>


	<div id="app-7">
		<ol>
			<todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id">
				
			</todo-item>
		</ol>
	</div>
	
	<div id="app-8">
		<p> {{obj.foo}} </p>
		<button @click="obj.foo='baz'">change it</button>
	</div>

	<div id="app-9">
		<span v-once>this will not change--> {{msg}} </span>
	</div>

	<div id="app-10">
		<p>Using mustaches: {{ rawHtml}} </p>
		<p>Using v-html directive: <span v-html="rawHtml"></span></p>
	</div>

	<div id="app-11">
		<a v-bind:href="url">test bin</a>
		<a :href="url2">test bind 2</a>
		<button v-on:click="do1">do1</button>
		<button @click="do2">do2</button>
          <p> {{ message.split('').reverse().join('')}} </p>
          <p> {{ msg1 }} </p>
          <p> {{ msg2 }} </p>
          <p> {{ now }} </p>
          <p> {{ firstName }} </p>
          <p> {{ lastName }} </p>
          <p> {{ fullName }} </p>
	</div>

	<div id="watch-example">
		<p>
		  Ask a yes/no question:
		<input v-model="question">
		</p>
  		<p>{{ answer }}</p>
	</div>

	<div id="app-12" class="static" v-bind:class="{ active: isActive, 'text-danger': hasError}">

		<p>test</p>
		<span v-for="n in 10">{{n}}</span>	

		<ul>
			<template v-for="item in items">
				<li>{{item.msg}}</li>
				<li class="divider"></li>
				
			</template>

		</ul>
	</div>

	<div id="app-13">
		<input v-model="newTodoText" 
			v-on:keyup.enter="addNewTodo"
			placeholder="add a todo">
		<ul>
		<li is="todo-item" v-for="(item, index) in items" 
			v-bind:title="item.title"
			v-bind:key="item.id"
			v-on:remove="items.splice(index, 1)">
		</li>

		</ul>
	</div>
		

<script type="text/javascript">

	Vue.component('todo-item', {
	  template: '<li>{{title}} <button v-on:click="$emit(\'remove\')">X</button></li>',
	  props:['title']
	});

	var app13 = new Vue({
	  el: '#app-13',
	  data: {
	    newTodoText: '',
	    items:[
	      {id: 1, title:'do 1'},
	      {id: 2, title:'do 2'},
	      {id: 3, title:'do 3'}
	    ],
	  nextTodoId: 4
	  },
	  methods: {
  	    addNewTodo: function(){
		this.items.push({
		  id: this.nextTodoId++,
		  title: this.newTodoText
		})
           	this.newTodoText = ''
	    }
	  }
	});



	var app12 = new Vue({
	  el: '#app-12',
	  data: {
	    isActive: true,
	    hasError: false,
	    items:[
	        {msg: 1},
	        {msg: 1},
	        {msg: 1},
	        {msg: 1}
		]
	  }
	})

	

	var watchExampleVM = new Vue({
	  el: '#watch-example',
	  data: {
	    question: '',
	    answer: 'I canno gie u an answer'
  	  },
	  watch: {
	   // 如果是方法,那么就发生改变就调用
	   question: function(newq, oldq){
		this.answer = 'waiting for your stop typing...',
       		this.getAnswer()
	   }
   	  },
	  methods: {
	    getAnswer: _.debounce(
	      function(){
	        if(this.question.indexOf('?')=== -1){
		    this.answer = 'question should contains a ?' 
		    return
  		}
 		this.answer = 'Thinking...'
		var vm = this
		axios.get('https://yesno.wtf/api')
		.then(function(response){
	    	    vm.answer = _.capitalize(response.data.answer)	
		})
		.catch(function(error){
		    vm.answer = 'Error is ' + error
		})	
	      },
		500
	    )
	  }
	})

	var app11 = new Vue({
		el: '#app-11',
		data:{
 		 url: 'www.baidu.com',
 		 url2: 'www.baidu.com',
                 message: 'love is now or never',
                 msg1: 'hiding from the raing snow',
		firstName: 'Foo',
		lastName: 'bar'
		},
		
               computed: {
		fullName: {
		  get: function() {
			return this.firstName + ' ' + this.lastName
		  },
		  set: function(newValue){
   			var names = newValue.split(' ')
   			this.firstName = names[0]
			this.lastName = names[names.length-1]
   		  }
		},
   		msg2: function(){
			return this.msg1.split('').reverse().join('');
		},
		now: function() {
			return Date.now()
		}
		},

		methods: {
			do1: function() {
				alert(1);

			},
			do2: function() {
				alert(2);
			}
		}
	});


	var app = new Vue({
		el: '#app',
		data: {
			message: 'Hello Vue!'
		}
	});

	var app2 = new Vue({
		el: '#app-2',
		data: {
			message: 'page loading at ' + new Date().toLocaleString()
		}
	});

	var app3 = new Vue({
		el: '#app-3',
		data: {
			seen: true
		}
	});

	var app4 = new Vue({
		el: '#app-4',
		data: {
			todos:[
			{ text: 'learn JavaScript'}, 
			{ text: 'learn Vue'},
			{ text: 'learn total great project'}
			]
		}
	});
	app4.todos.push({text: 'learn java!'});

	var app5 = new Vue({
		el: '#app-5',
		data: {
			message: 'I love u !'
		},
		methods: {
			reverseMessage: function(){
				this.message = this.message.split('').reverse().join('')
			}
		}
	});

	var app6 = new Vue({
		el: '#app-6',
		data: {
			message: 'love is now or never'
		}

	});



	Vue.component('todo-item', {
		props: ['todo'],
		template: '<li>{{ todo.text }}</li>'
	});
	var app7 = new Vue({
		el: '#app-7',
		data: {
			groceryList:[
				{id: 0, text: 'vegetable'},
				{id: 1, text: 'apple'},
				{id: 2, text: 'orange'}
				

			]
		}
	});

	var data = {a: 1};
	var vm = new Vue({
		data: data
	});

	console.log(vm.a === data.a);

	vm.a = 2;
	console.log(data.a);

	data.a = 3;
	console.log(data.a);


	var obj = { foo: 'bar'};
	Object.freeze(obj);

	new Vue({
		el: '#app-8',
		data() {
			return {
				obj
			}
		}
	});

	new Vue({
		data: {
			a: 1
		},
		created: function() {
			console.log('a is :' + this.a);
		}
	});

	var vue9 = new Vue({
		el: '#app-9',
		data: {
			msg: 'hello world'
		}
	});


</script>
</body>

</html>
